import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from "react-redux"
import { initUser } from "../action/userAction"
import { Layout, Menu, Breadcrumb } from 'antd';
import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
import ListRouter from "../router/listRouter";

export default function List(props: any) {
    const userInfo = useSelector((state: any) => state.userInfo.info);
    //用户的菜单  也可以变成根据用户的id 去获取数据用户的菜单和路由
    const [menuList, setMenuList] = useState([{
        id: 1, msg: "我的列表", path: "/list/table",title:"列表"
    },
    {
        id: 2, msg: "个人中心", path: "/list/mine",title:"个人"
    }])
    let  pathName = props.location.pathname;//当前浏览器的地址
    const [selectedIndex, setSelectedIndex] = useState(String(menuList.filter(item=>item.path==pathName)[0]?.["id"]));

    const dispatch = useDispatch();
    const [collapsed, setCollapsed] = useState(false);

    let onCollapse = (collapsed: any) => {
        setCollapsed(collapsed);
    };


    // useEffect(() => {//页面加载完成
    //     let existInfo: any = window.localStorage.getItem("userinfo");
    //     if (!Object.keys(userInfo).length && !existInfo) {//全局的没有  本地缓存的也没有
    //         props.history.push("/");
    //     } else {//说明用户登录了
    //         dispatch(initUser(JSON.parse(existInfo)));//数据更新了
    //     }
    // }, [])


    return (
        <div>
            <h3>欢迎您{userInfo.username}</h3>
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
                    <div className="logo" />
                    <Menu theme="dark" selectedKeys={[selectedIndex]} mode="inline">

                        {menuList.map((item: any) => {
                            return <Menu.Item key={item.id} onClick={() => {
                                setSelectedIndex(item.id + "");
                                    props.history.push(item.path);
                            }}>
                                {item.msg}
                            </Menu.Item>
                        })}

                        {/* 
                        <Menu.Item key="3">
                               我的列表
                        </Menu.Item>
                        <Menu.Item key="4">
                            个人中心
                        </Menu.Item> */}

                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }} />
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>{menuList.filter(item=>item.path==pathName)[0]?.title}</Breadcrumb.Item>
                        </Breadcrumb>
                        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                            <ListRouter></ListRouter>
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </Layout>
        </div>
    )
}







